<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<%--
  Created by IntelliJ IDEA.
  User: delisha
  Date: 2021/10/29
  Time: 19:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

<%--<h1>成员列表</h1>--%>
<div class="container">
    <%--        标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <%--    --%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8" >
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>

    </div>
    <%--    学生信息--%>
    <div class="row">
        <div class="col-md-12" >
            <table class="table table-hover" id="stus_table">
                 <thead>
                    <tr>
                        <th>#</th>
                        <th>stuName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>department</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <%--    分页信息--%>
    <div class="row">
        <%--            分页文字信息--%>
        <div class="col-md-6" id="page_info_area">

        </div>
        <%--            --%>
        <div class="col-md-6 col-md-offset-4" id="page_nav_area">

        </div>
    </div>

</div>



<!-- 学生模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">学生添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">stuName</label>
                        <div class="col-sm-10">
                            <input type="text" name="stuName" class="form-control" id="stuName_add_input" placeholder="stuName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email">
                        </div>
                    </div>
                    <label class="radio-inline">
                        <input type="radio" name="gender" id="gender1_add_input" value="M"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                    </label>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">department</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_add_select">
                            </select>
                        </div>
                    </div>

                </form>
            </div>



            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function (){
       to_page(1);
    });

    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/stu",
            data:"pn="+pn,
            type:"GET",
            success:function (result){
                console.log(result);
                build_stus_table(result);
                //
                build_page_info(result);

                build_page_nav(result);
            }
        });
    }

    function build_stus_table(result){
        $("#stus_table tbody").empty();
        var stus = result.extend.pageInfo.list;
        $.each(stus,function(index,item){
            var stuIdTd = $("<td></td>").append(item.stuId);
            var stuNameTd = $("<td></td>").append(item.stuName);
            var genderTd = $("<td></td>").append(item.gender=="M"?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var departmentTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            var delBtn =  $("<button></button>").addClass("btn btn-warning btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            $("<tr></tr>").append(stuIdTd)
                .append(stuNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(departmentTd)
                .append(btnTd)
                .appendTo("#stus_table tbody");

        });
    }

    function build_page_info(result){


        $("#page_info_area").empty();

        $("#page_info_area").append("当前第 "+result.extend.pageInfo.pageNum+" 页, 共 "+
            result.extend.pageInfo.pages+" 页, 共 "+
            result.extend.pageInfo.total+" 条记录");

        currentPage = result.extend.pageInfo.pageNum;
    }

    function build_page_nav(result){

        //清空分页条信息
        $("#page_nav_area").empty();

        //Bootstrap中的写法，导航条中的信息都要写在ul变量中
        var ul = $("<ul></ul>").addClass("pagination");

        //首页
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));

        //前一页
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

        //如果当前遍历的页码是首页(没有前一页)，让首页和上一页不可点击
        if(result.extend.pageInfo.hasPreviousPage == false){
            //disabled是Bootstrap中的写法
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else{
            //为首页和前一页添加点击翻页的事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum -1);
            });
        }

        //后一页
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));

        //末页
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

        //如果当前遍历的页码是末页(没有下一页)，让末页和下一页不可点击
        if(result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            //为下一页和末页添加点击翻页的事件
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum +1);
            });
            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }

        //导航条中添加首页和前一页
        ul.append(firstPageLi).append(prePageLi);

        //遍历1，2，3之类的页码
        $.each(result.extend.pageInfo.navigatepageNums, function(index,item){

            //numLi / item表示遍历到的1，2，3之类的页码
            var numLi = $("<li></li>").append($("<a></a>").append(item));

            //如果当前遍历的页码就是当前的页码，让其高亮显示
            if(result.extend.pageInfo.pageNum == item){
                //active是Bootstrap中的写法
                numLi.addClass("active");
            }

            //单击事件，跳转到对应页面
            numLi.click(function(){
                to_page(item);
            });

            //向导航条中添加1，2，3之类的页码
            ul.append(numLi);
        });

        //导航条中添加下一页和末页
        ul.append(nextPageLi).append(lastPageLi);

        //把ul导航条添加到导航条在页面中的位置
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    <!-- 查询、分页功能结束 -->


    //点击新增按钮弹出添加学生的模态框
    $("#emp_add_modal_btn").click(function(){

        // //调用函数清除模态框的所有数据数据，防止上一次信息残留
        // reset_form("#empAddModal form");
        //
        // //调用函数发送ajax请求，查出社团信息，显示在下拉列表(select标签)中
        getDepts("#empAddModal select");

        //弹出添加学生的模态框(Bootstrap代码)
        $("#empAddModal").modal({
            backdrop:"static"
        });
    });

    function getDepts() {
        $("#dept_add_select").empty();
        $.ajax({
           url:"${APP_PATH}/dept",
           type:"GET",
           success:function (result){
               // {"code":1,"msg":"成功","extend":
               // {"depts":[
               // {"deptId":1,"deptName":"学生部"},
               // {"deptId":2,"deptName":"信息部"},
               // {"deptId":3,"deptName":"记者部"},
               // {"deptId":4,"deptName":"实创部"},
               // {"deptId":5,"deptName":"崩坏部"}
               // ]}}
               // console.log(result);
               $.each(result.extend.depts,function (){
                   var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                   // $("#dept_add_select").append(optionEle);
                   optionEle.appendTo("#dept_add_select");
               });
           }
        });
    }

    // $("#emp_save_btn")
</script>
</body>
</html>
